<template>
  <div class="app-container">
    <div if="user">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <info ref="info" :user="user" @on-page="setPage" />
        </el-col>
        <el-col :span="18" :xs="24">
          <avatar
            v-if="page==='avatar'"
            :fn-modify="fnUploadAvatar"
          />
          <modify-info
            v-if="page==='info'"
            :fn-modify="fnModifyInfo"
          />
          <modify-password
            v-if="page==='password'"
            :fn-modify="fnModifyPwd"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Info from './components/Info'
import Avatar from './components/Avatar'
import ModifyInfo from './components/ModifyInfo'
import ModifyPassword from './components/ModifyPassword'
import { modifyInfo, modifyPassword, uploadAvatar } from '@/svc/account'

export const PageInfo = {
  title: '我的信息',
  icon: 'user',
  hidden: true,
  apis: [
    ...modifyInfo.apis,
    ...modifyPassword.apis,
    ...uploadAvatar.apis
  ]
}

export default {
  name: 'SelfInfo',
  components: { Info, Avatar, ModifyInfo, ModifyPassword },
  data() {
    return {
      user: {},
      page: 'info',
      fnModifyInfo: modifyInfo.fn,
      fnModifyPwd: modifyPassword.fn,
      fnUploadAvatar: uploadAvatar.fn
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    setPage(page) {
      this.page = page
    },
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        email: 'admin@test.com',
        avatar: this.avatar
      }
    }
  }
}
</script>

<style scoped>

</style>
